<template>
  <div class="departments">
    <!-- 最大的卡片容器 -->
    <el-card class="mycard">
      <!-- 顶部导航 -->
      <el-tabs v-model="activepane">
        <el-tab-pane label="组织架构" name="first"></el-tab-pane>
      </el-tabs>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 总公司 -->
        <treetool class="myborder" :data="comData"></treetool>
        <el-tree class="mytree" :data="deptList" default-expand-all>
          <treetool :data="data" slot-scope="{ data }"></treetool>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入组件
import treetool from './components/treetool'
// 导入接口
import { getDeptListApi } from '@/api/departments'
export default {
  data () {
    return {
      // 选中 tab 的 name 属性
      activepane: 'first',
      // 树状结构的数据源
      deptList: [],
      // 总公司的数据源
      comData: {
        label: '江苏传智播客教育科技股份有限公司'
      }
    }
  },
  methods: {
    // 得到组织架构的数据源
    async getDeptList () {
      try {
        const res = await getDeptListApi()
        // 保存数据源
        this.deptList = res.data.data.depts
        // 将数据源中的第一条数据赋值给头部
        this.comData = res.data.data.depts[0]
        // 再添加一个额外属性： manager
        this.comData.manager = '负责人'
        // 再给头部数据添加一个额外属性
        this.comData.isHead = true
      } catch (err) {
        console.log(err.message)
      }
    }
  },
  created () {
    // 获取组织架构数据
    this.getDeptList()
  },
  components: {
    treetool
  }
}
</script>

<style lang="scss">
.departments {
  margin: 20px;
  .mycard {
    padding: 20px 40px;
  }
  .content {
    padding: 30px 80px;

    .myborder {
      border-bottom: 1px solid #ccc;
    }
    .mytree {
      margin-top: 20px;
    }
  }
}
</style>